<template>
  <div ref="container" style="height: 100%; width: 100%"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import geoJson from '~/public/hang-zhou-shi.json';

const props = defineProps({
  data: {
    type: Array as PropType<{ name: string; value: number }[]>,
    required: true
  }
});
const container = ref(null);
let myChart: any;
echarts.registerMap('HK', { geoJson: geoJson });

function initChart(data: any) {
  if (!myChart) {
    myChart = echarts.init(container.value);
  }
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>{c}'
    },
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 'center'
    },
    visualMap: {
      type: 'continuous',
      min: 0,
      max: 1000,
      text: ['High', 'Low'],
      realtime: false,
      calculable: true,
      inRange: {
        color: ['#3589FD', '#FFC700', '#f56c6c']
      },
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '信用城市',
        type: 'map',
        map: 'HK',
        data,
        label: {
          show: true,
          color: '#fff'
        }
      }
    ]
  };
  myChart.setOption(option);
}

watch(
  () => props.data,
  (val) => {
    if (val) {
      initChart(val);
    }
  }
);

onMounted(() => {
  if (props.data) {
    initChart(props.data);
  }
});
</script>
